{{ extend '../layout/layout.html' }}
{{block 'header'}}
    <style>
        li {
            border-bottom: 0 solid #000;
            display: inline-block;
            position: relative;
            cursor: pointer;
            padding: 10px;
        }
        li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            border-bottom: 2px solid #000;
            transition: all 0.3s ease;
        }

        .demo1 > li:hover::before {
            width: 100%;
        }
        .demo2 > li::before {
            left: 100%;

        }
        .demo2 > li:hover::before {
            left: 0;
            width: 100%;
        }
        .demo3 > li::before {
            left: 100%;

        }
        .demo3 > li:hover::before {
            width: 100%;
            left: 0;
        }

        .demo3 > li:hover ~ li::before {
            left: 0;
        }
    </style>
{{/block}}
{{block 'content'}}
    <ul class="demo1">
        <h4>demo1</h4>
        <li>不可思议的CSS</li>
        <li>导航栏</li>
        <li>光标小下划线跟随</li>
        <li>PURE CSS</li>
        <li>Nav Underline</li>
    </ul>
    <ul class="demo2">
        <h4>demo2</h4>
        <li>不可思议的CSS</li>
        <li>导航栏</li>
        <li>光标小下划线跟随</li>
        <li>PURE CSS</li>
        <li>Nav Underline</li>
    </ul>
    <ul class="demo3">
        <h4>demo3</h4>
        <li>不可思议的CSS</li>
        <li>导航栏</li>
        <li>光标小下划线跟随</li>
        <li>PURE CSS</li>
        <li>Nav Underline</li>
    </ul>
{{/block}}